import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { AtInput , AtButton } from 'taro-ui';
import './bindphone.scss';
import { codeLogin, sendCode } from '../../util/api';
import { setToken } from '../../util/globaldata';
export default class BindPhone extends Component {
    config = {
        navigationBarTitleText:"绑定手机",
    }
    constructor(){
        super(...arguments);
        this.state = {
            phone:"",
            code:"",
            timpTxt:"获取验证码",
            wid:"",
            nickname:"",
            headimgurl:"",
            codeFocus:false,
        }
    }
    componentWillMount(){
        let { wid , nickname , headimgurl } = this.$router.params
        this.setState({ wid , nickname , headimgurl })
    }
    onhandleChange (value) {
        this.setState({ phone:value })
        return value
    }
    onCodeChange(value){
        this.setState({ code:value })
        return value
    }
    getTimeOut(){
        let { timpTxt , phone } = this.state;
        if (!phone) {
            Taro.showToast({title:"请输入手机号",icon:'none'})
            return false
        }
        if(timpTxt !== '获取验证码'){
            return false
        }
        var t = 60;
        this.setState({timpTxt:t-- + "S"})
        this.timp = setInterval(() => {
           t--
           if (t <= 0) {
               this.setState({timpTxt:"获取验证码"})
               clearInterval(this.timp)
           }else{
               this.setState({timpTxt:t + "S"})
           }
        },1000)
        sendCode({phone}).then(res => {
            if(res.code == 0){
                this.setState({codeFocus:true})
            }
            Taro.showToast({title:res.msg,icon:'none'});
        })
    }
    onBindPhone(){
        setTimeout(() => {
            let { phone , code , wid , nickname , headimgurl } = this.state;
            if(!phone){
                Taro.showToast({title:"请输入手机号",icon:'none'})
                return false
            }
            if(!code){
                Taro.showToast({title:"请输入验证码",icon:'none'})
                return false
            }
            codeLogin({
                phone,
                code,
                wid,
                nickname,
                headimgurl,
            }).then( res => {
                if(res.code == 0){
                    setToken(res.user);
                    Taro.showToast({title:res.msg});
                    setTimeout(() => {
                       Taro.navigateBack();
                    },700)
                }else{
                    Taro.showToast({title:res.msg})
                }
            })
        },100)
    }
    render(){
        let { timpTxt , codeFocus } = this.state;
        return (
            <View className='bingphone'>
                <View className='form-item'>
                    <AtInput
                    name='value6'
                    border={false}
                    type='phone'
                    placeholder='请输入手机号'
                    maxLength={11}
                    value={this.state.phone}
                    clear
                    focus={true}
                    onChange={this.onhandleChange.bind(this)}
                    >
                        <Text className='getcode' onClick={this.getTimeOut.bind(this)}>{timpTxt}</Text>
                    </AtInput>
                </View>
                <View className='form-item'>
                    <AtInput
                        name='value6'
                        border={false}
                        type='phone'
                        placeholder='请输入验证码'
                        maxLength={4}
                        value={this.state.value}
                        clear
                        onChange={this.onCodeChange.bind(this)}
                        focus={codeFocus}
                    />
                </View>
                <AtButton className='btn' type='primary' onClick={this.onBindPhone.bind(this)}>绑定手机</AtButton>
            </View>
        )
    }
}